
// @on-change 监听选择完成事件 返回files数组 // echoFileList 回显的图片数据
<template>
    <div class="sc-upload">
        <el-upload ref="scUpload" action="#" list-type="picture-card" :auto-upload="autoUpload" :multiple="multiple" :limit="limit" :file-list="echoFileList">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
                <img class="el-upload-list__item-thumbnail" :src="file.url" />
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- 下载图片 -->
                    <!--      <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                        <i class="el-icon-download"></i>
                    </span> -->
                    <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
    </div>
</template>

<script>
import config from "../../config";
export default {
    name: config.prefix + "Upload",
    props: {
        //是否自动上传
         autoUpload: {
            type: Boolean,
            default: false
        },
        // 是否开启多图上传
        multiple: {
            type: Boolean,
            default: true
        },
        //限制上传数量
        limit: {
            type: Number,
            default: 1
        },
        //回显的图片数据
        echoFileList: {
            type: Array,
            default: () => [
                /* {
                    name: "food.jpeg",
                    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
                } */
            ]
        }
    },
    data() {
        return {};
    },
    mounted() {
        this.$watch("$refs.scUpload.uploadFiles", nval => {
            console.log("nval :>> ", nval);
            this.$emit("on-change", nval);
        });
    },
    computed: {
        // 选中的文件列表
        /*  uploadFiles: {
            get() {
                console.log('this.$refs["sc-upload"].uploadFiles :>> ', this.$refs["sc-upload"].uploadFiles);
                this.$emit("update:fileList", this.deepClone(this.$refs["sc-upload"].uploadFiles));
                return this.$refs["sc-upload"].uploadFiles;
            }
        } */
    },
    methods: {
        // 删除图片
        handleRemove(file) {
            this.$refs.scUpload.uploadFiles = this.$refs.scUpload.uploadFiles.filter(item => item.uid !== file.uid);
        },
        // 预览图片
        handlePictureCardPreview(file) {
            this.$imgView(
                this.$refs.scUpload.uploadFiles.map(v => v.url),
                this.$refs.scUpload.uploadFiles.findIndex(v => v.url === file.url)
            );
        }
        //下载图片
        /* handleDownload(file) {
            console.log(file);
        }, */
    }
};
</script>
<style lang="scss" scoped></style>
